<template>
  <div>
    <el-container style="height: 850px">
      <el-aside width="15%" height="500px">
        <h4 style="line-height: 40px">
          个人中心
        </h4>
        <el-divider></el-divider>
        <el-menu
            default-active="2"
            class="el-menu-vertical-demo">
          <el-menu-item index="1" @click="getHeader('我的订单','userOrder')">
            <i class="el-icon-menu"></i>
            <span slot="title">我的订单</span>
          </el-menu-item>
          <el-menu-item index="2" @click="getHeader('我的基本信息','information')">
            <i class="el-icon-menu"></i>
            <span slot="title">我的基本信息</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container>
        <el-header style="line-height: 50px">{{ header }}</el-header>
        <el-main style="display: flex; justify-content: center">
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
export default {
  name: "UserMenuView",
  data() {
    return {
      header: ""
    }
  },
  created() {
    this.header = this.$route.query.header
  },
  methods: {
    getHeader(header,router){
      this.header = header
      var pushPath="/webMenu/userMenu/"+router
      this.$router.push({path: pushPath, query: {
        header: "我的基本信息"
      }})
    }
  }
}
</script>

<style scoped>
body {
  height: 100%;
}
</style>